<template>
  <div class="homeBox">
    <div class="top">
      <HomeCard
        v-for="item in arr"
        :key="item.text"
        :text="item.text"
        :num="item.num"
        :icon="item.icon"
        :color="item.color"
        radius
      />
    </div>
    <div class="bottom">
      <div id="main" style="height: 400px"></div>
    </div>
  </div>
</template>

<script>
import HomeCard from "./components/HomeCard.vue";
// 引入echarts
import * as echarts from "echarts";

import { $_order_totaldata } from "@/api/order";

export default {
  data() {
    return {
      arr: [
        {
          text: "总订单",
          num: "0",
          icon: "icon-order-manage",
          color: "red",
        },
        {
          text: "总销售额",
          num: "0",
          icon: "icon-money",
          color: "blue",
        },
        {
          text: "今日订单数",
          num: "0",
          icon: "icon-order-update",
          color: "yellow",
        },
        {
          text: "今日销售额",
          num: "0",
          icon: "icon-pay",
          color: "green",
        },
      ],
      myChart: null,
    };
  },
  components: {
    HomeCard,
  },
  methods: {
    draw(xData, orderData, amountData) {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("main"));

      let option = {
        // 堆叠颜色
        color: ["rgb(128, 255, 165)", "rgb(0, 221, 255)"],
        // 标题相关
        title: {
          text: "数据统计",
          left: 30,
        },
        // 提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // 顶部的提示框
        legend: {
          data: ["订单", "销售额"],
        },
        // 右侧工具箱
        toolbox: {
          showTitle: true,
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            magicType: {
              type: ["bar", "stack"],
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订单",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: orderData,
          },
          {
            name: "销售额",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: amountData,
          },
        ],
      };

      // 实例化图表
      this.myChart.setOption(option);
    },
    getData() {
      $_order_totaldata().then((res) => {
        console.log(res.data);
        let {
          amountData,
          orderData,
          todayOrder,
          totalAmount,
          totalOrder,
          totayAmount,
          xData,
        } = res.data;

        [totalOrder, totalAmount, todayOrder, totayAmount].forEach((v, i) => {
          this.arr[i].num = v;
        });

        this.draw(xData, orderData, amountData);
      });
    },
  },
  mounted() {
    this.getData();

    // 监听用户修改浏览器窗口大小
    window.addEventListener("resize", () => {
      console.log("窗口发生了变化");
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
.homeBox {
  .top {
    display: flex;
    justify-content: space-between;
    .myCard:nth-child(4) {
      margin-right: 0;
    }
  }
  .bottom {
    background: #fff;
    margin-top: 20px;
    padding: 15px 20px;
  }
  @media only screen and (max-width: 1000px) and (min-width: 900px) {
    /deep/i {
      font-size: 55px;
    }
  }
  @media only screen and (max-width: 900px) {
    /deep/.myCard {
      width: 48%;
      margin-right: 0;
      margin-bottom: 10px;
    }
    /deep/.myCard:nth-child(1) {
      margin-right: 10px;
    }
    /deep/.myCard:nth-child(3) {
      margin-right: 10px;
    }
    /deep/.top {
      flex-wrap: wrap;
    }
  }
}
</style>